<template>
	<view style=" padding-bottom: 120rpx;">
		<my-tab @ontap='ontap' :data="{
			id:info.cur_id,
			type:5
		}" :dianzan='info.collection' />
		<u-swiper height='510' v-if='info' :list="info.details_image.split(',')"></u-swiper>
		<!-- 秒杀 -->
		<my-miaosha :timestamp='timestamp' v-if="info.activity==1&&info.is_buy==0" title='限时秒杀' content='超值优惠活动' />
		<!-- 选项卡 -->
		<view style="border-bottom: 1rpx solid #E3E3E3;">
			<liuyuno-tabs :tabData="list" :activeIndex="current" @tabClick='tabClick' />
		</view>
		<!-- 选项卡内容 -->
		<view class="" style="margin-top: 40rpx;">
			<!-- 简介 -->
			<jianjie v-if="current==0" :info='info' />
			<!-- 课程表 -->
			<kecheng :time='time' v-if="current==1" :info='info' :zuanlan='info.expert_size' />
			<!-- 评价 -->
			<pingjia @onchange='onchange' @onchange2='onchange2' :list='liuyan' v-if="current==2" :info='info' />
			<!-- 相关推荐 -->
			<tuijian v-if="current==3" :info='infotj' />
		</view>
		<u-popup v-model="showpopup" border-radius='40' closeable close-icon-pos='top-left' mode="bottom">
			<view class="prop">
				<view class="prop_1" @click="fabu">
					<image :src="require('@/static/img/fbpl.png')" style="width:100% ;height: 100%" />
				</view>
				<view class="index1">
					<u-input :clearable='false' placeholder='记录下稍纵即逝的灵感吧' v-model="value" type="textarea" />
				</view>
			</view>
		</u-popup>

		<view class="foote">
			<view style="" v-if="info.is_buy==0">
				<view class="goumai" @click="submit(zuanlan,current)">
					<view class="">
						<view class="goumai_1">限时优惠：<text>￥266</text></view>
						<view class="goumai_2">原价：￥266</view>
					</view>
				</view>
			</view>
			<!-- 	<view v-if="info.expert_size==0">
				<view class="goumai" @click="submit(zuanlan,current)">
					<view>
						辅助开通{{'( '+number+' )'}}
					</view>
				</view>
			</view> -->
			<view style="" v-if="current==2&&info.is_buy==1&&info.charge==1">
				<view class="goumai" @click="submit(zuanlan,current)">
					发表评论
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jianjie from './components/jianjie.vue'
	import kecheng from './components/kecheng.vue'
	import pingjia from './components/pingjia.vue'
	import tuijian from './components/tuijian.vue'

	export default {
		components: {
			jianjie,
			kecheng,
			pingjia,
			tuijian
		},
		data() {
			return {
				infotj: null,
				time: null,
				timestamp: '',
				number: 7,
				info: {},
				showpopup: false,
				liuyan: null,
				liuyanf: {
					page: 1
				},
				cur_id: '',
				value: '',
				type: '',
				zuanlan: {
					type: 2, //1是大专栏，2是小专栏，
					chase: 2, //1已购买，2是没购买
				},
				list: [{
						name: '简介',
					}, {
						name: '课程表'
					}, {
						name: '评价'
					},
					{
						name: '相关推荐',
						width: '190rpx'
					}
				],
				current: 0

			}
		},
		onLoad(e) {
			this.time = parseInt(new Date().getTime() / 1000)
			this.cur_id = e.cur_id,
				this.getinfo()
			this.countdown()
			this.liyanlist()
			this.type = e.type ? e.type : ''
			if (this.type == 1) {
				this.zuanlan = {
					type: 2, //1是大专栏，2是小专栏，
					chase: 1, //1已购买，2是没购买
				}
			} else if (this.type == 2) {
				this.zuanlan = {
					type: 1, //1是大专栏，2是小专栏，
					chase: 2, //1已购买，2是没购买
				}
			} else if (this.type == 3) {
				this.zuanlan = {
					type: 2, //1是大专栏，2是小专栏，
					chase: 2, //1已购买，2是没购买
				}
			}
		},
		methods: {
			// 评论选项卡
			onchange2(a) {
				console.log(a)
				this.liuyanf.type = a
				this.liyanlist()
			},
			// 点赞
			onchange(a, b, c) {
				if (a == '点赞') {
					this.$api('broadcast/support', {
						cur_id: this.cur_id,
						review_id: b
					}).then(res => {
						if (res.code == 1) {
							this.$toast(res.msg, 1)
							this.liyanlist()
						}
					})
				} else {
					let form = {
						pid: b,
						cur_id: this.cur_id
					}
					uni.navigateTo({
						url: `../jxpl/jxpl?form=${JSON.stringify(form)}&content=${JSON.stringify(c)}`
					})


				}

			},
			//评论按钮
			fabu() {
				let data = {
					cur_id: this.cur_id,
					pid: 0,
					content: this.value
				}
				this.$api('broadcast/commentSave', data).then(res => {
					this.liyanlist()
				})
			},
			liyanlist() {
				this.liuyanf.cur_id = this.cur_id
				this.$api('broadcast/commentList', this.liuyanf).then(res => {
					this.liuyan = res.data
				})
			},
			ontap() { //点赞
				this.getinfo()
			},
			getinfo() {

				this.$api('expert/expertMsg', {
					cur_id: this.cur_id
				}).then(res => {
					this.info = res.data
					this.timestamp = res.data.activity_endtime - this.$now
				})
			},
			submit(a, b) {
				this.showpopup = true
				return
				if (a == 0) { //未购买
					this.purchase()
				} else {
					if (b == 2) {
						this.showpopup = true
					}
				}

			},
			// 倒计时
			countdown() {
				if (this.number == 0) {
					this.number = 7;
					return false;
				} else {
					this.number--;
				}
				setTimeout(() => {
					this.countdown();
				}, 1000);
			},
			purchase() {
				uni.navigateTo({
					url: `/pages/play/purchase?type=${'专栏'}`
				});
			},
			tabClick(item, index) {
				if (index == 3) {
					//推荐
					this.$api('expert/recommend', {
						cur_id: this.cur_id
					}).then(res => {
						this.infotj = res.data
					})
				}
				this.current = index
			}
		},
	}
</script>


<style lang="scss" scoped>
	.foote {
		position: fixed;
		bottom: 20rpx;
		width: 100%;
	}

	.miaosha {
		height: 140rpx;
		background-color: #FC2053;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.miaosha_2 {
			width: 172rpx;
			height: 58rpx;
			text-align: center;
			line-height: 58rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 29px;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			color: #FF2424;
			opacity: 1;
		}

		.miaosha_1 {
			text:nth-of-type(1) {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 1;
			}

			text:nth-of-type(2) {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				opacity: 1;

			}


			text {
				display: block;
			}
		}
	}

	.prop_1 {
		position: absolute;
		width: 140rpx;
		height: 58rpx;
		margin: 20rpx 20rpx 0 0;
		right: 20rpx;
	}

	.index1 {
		position: relative;
		top: 90rpx;
		width: 100;
		padding: 0rpx 40rpx 0rpx 40rpx;

	}

	.prop {
		position: relative;
		height: 750rpx;
		background-color: #FFFFFF;
		;
		width: 100%;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.goumai {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		width: 350rpx;
		height: 98rpx;
		border-radius: 50rpx;
		background-color: #FFD500;
		text-align: center;

		.goumai3 {
			font-size: 30rpx;
			font-family: HarmonyOS Sans;
			font-weight: 500;
			line-height: 0px;
			color: #703F00;
			opacity: 1;
		}

		.goumai_1 {
			font-size: 30rpx;
			font-family: HarmonyOS Sans;
			font-weight: bold;
			color: #FF2424;
			opacity: 1;

			text {
				font-size: 36rpx;
			}
		}

		.goumai_2 {
			text-decoration: line-through;
			font-size: 26rpx;
			font-family: HarmonyOS Sans;
			font-weight: 400;
			color: #F5F5F5;
			opacity: 1;
		}
	}

	.top {
		padding: 0rpx 20rpx 20rpx 20rpx;
		height: 510rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat
	}
</style>
